<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-size: 20px;
		}
		.demo{
			width: 150px;
			height: auto;
			margin:100px auto 0;
		}
		ul li{
			list-style: none;
			width: 100%;
			height: 30px;
			border:1px solid #000 ;
			cursor: pointer;
			overflow: hidden;
		}
		ul li h3{
			background-color: purple;
			color:#fff;
			text-indent: 20px;
			line-height: 30px;
		}
		ul li p{
			color:#000;
			border-bottom: 1px dotted #ccc;
			text-indent: 20px;
			line-height: 30px;
		}
	</style>
</head>
<body>
	<div class="demo">
		<ul>
			<li>
				<h3>西甲</h3>
				<p>皇家马德里</p>
				<p>巴塞罗那</p>
				<p>马德里竞技</p>
			</li>
			<li>
				<h3>英超</h3>
				<p>曼联</p>
				<p>阿森纳</p>
				<p>利物浦</p>
			</li>
			<li>
				<h3>意甲</h3>
				<p>AC米兰</p>
				<p>尤文图斯</p>
				<p>Inter米兰</p>
			</li>
		</ul>
	</div>
</body>
	<script>
		var oLi =document.getElementsByTagName('li');
		var oP = document.getElementsByTagName('p');
		
		for(var i=0;i<oP.length;i++){
			oLi[i].bool=true;
			oLi[i].onclick=function(){

				if(this.bool){
					for(var j=0;j<oLi.length;j++){
					oLi[j].style.height='30px';
					oLi[j].bool=true;
				}
				this.style.height='auto';
				this.bool=!this.bool;
				}else{
					this.style.height='30px';
					this.bool=!this.bool;
				}

				
			}
				
				for(var k=0;k<oP.length;k++){
					oP[k].onmouseenter=function(){
					this.style.backgroundColor="red";
					}
					oP[k].onmouseleave=function(){
					this.style.backgroundColor="";
					}
				}
			
		}	
		

	</script>
</html>